<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理系统</title>
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>
        body {
            background-color: #f2f2f2;
            padding: 15px;
        }
        .layui-card {
            box-shadow: 0 1px 6px rgba(0,0,0,.1);
            border-radius: 2px;
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
        }
        .layui-table-view {
            box-shadow: none;
        }
        .layui-table td, .layui-table th {
            text-align: center;
        }
        .layui-form-label {
            width: 80px;
        }
        .layui-input-block {
            margin-left: 110px;
        }
        .layui-layer-title {
            background: #f8f8f8;
            color: #333;
            border-bottom: 1px solid #eee;
        }
        .layui-btn-sm {
            padding: 0 15px;
            height: 32px;
            line-height: 32px;
        }
        .layui-table-page {
            text-align: center;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">用户管理</div>
    <div class="layui-card-body">
        <!-- 上方工具栏-->
        <script type="text/html" id="auth-insert">
            <form class="layui-form" method="post">
                <div class="layui-form-item" style="padding-right: 50px">
                    <label class="layui-form-label">登录名</label>
                    <div class="layui-input-block">
                        <input id="post-username" type="text" name="title" required lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="padding-right: 50px">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input id="post-name" type="text" name="title" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="padding-right: 50px">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input id="post-password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="padding-right: 50px">
                    <label class="layui-form-label">管理员</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-filter="insert_switch" lay-skin="switch" name="close" lay-text="是|否" checked>
                    </div>
                </div>
            </form>
        </script>

        <table class="layui-hide" id="auth-table" lay-filter="auth-table"></table>

        <script type="text/html" id="isAdminTpl">
            <input type="checkbox" lay-filter="insert_switch" name="close" lay-skin="switch" lay-text="是|否" checked>
        </script>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="addPost">
                    <i class="layui-icon layui-icon-add-1"></i> 添加管理员
                </button>
            </div>
        </script>

        <script type="text/html" id="barTpl">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
                <i class="layui-icon layui-icon-ok"></i> 保存
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </a>
        </script>
    </div>
</div>

<script>
    var layerCallback;
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: '#auth-table',
            url:'/auths',
            toolbar: '#toolbar',
            parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": "",
                    data: res.data,
                    count: res.size
                }
            },
            cols: [[
                {field:'id', width:80, title: 'ID', sort: true},
                {field:'username', width:150, title: '登录名', edit: 'text', templet:function (row) {
                        return [
                            '<div>',
                            '<a href="#" style="color:#1E9FFF;">' + row.username + '</a>',
                            '</div>'
                        ].join('');
                    }},
                {field:'password', width:180, title: '密码', edit: 'text'},

                {field:'isAdmin', width:150, title: '管理员权限', templet:function (row) {
                        return [
                            '<input type="checkbox" lay-filter="admin_switch" lay-skin="switch" lay-text="是|否" ',
                            row.isAdmin == true ? "checked />" : " />"
                        ].join('');
                    }},
                {field:'createdTime', width:200, title: '创建时间', sort: true},
                {fixed: 'right', width:180, align:'center', toolbar: '#barTpl'}
            ]],
            page: true,
            even: true,
            skin: 'line'
        });

        var temp;
        form.on('switch(admin_switch)', function (obj) {
            temp = obj.elem.checked;
        });

        //监听工具条(右侧)
        table.on('tool(auth-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if(layEvent === 'del'){
                layer.confirm('确定删除用户 <span style="color:#FF5722;font-weight:bold;">' + data.username + '</span> 吗？',
                    {skin: 'layui-layer-molv',offset:'c', icon:3, title:'删除确认'},function(index){
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: '/auths/' + data.id,
                            type: 'delete',
                            success: function (res) {
                                console.log(res);
                                if (res.code == 200) {
                                    layer.msg('删除成功', {icon: 1, time: 1500});
                                } else {
                                    layer.msg('删除失败', {icon: 2, time: 1500});
                                }
                            }
                        })
                    });
            } else if(layEvent === 'edit'){
                $.ajax({
                    url: '/auths/' + data.id,
                    method: 'put',
                    data: JSON.stringify({
                        username: data.username,
                        password: data.password,
                        empId: data.empId,
                        isAdmin: temp == null ? data.isAdmin : temp
                    }),
                    contentType: "application/json",
                    success: function (res) {
                        console.log(res);
                        if (res.code == 200) {
                            layer.msg('更新成功', {icon: 1, time: 1500});
                            obj.update({
                                username: data.username,
                                password: data.password,
                                empId: data.empId
                            });
                        } else {
                            layer.msg('更新失败', {icon: 2, time: 1500});
                        }
                    }
                });
            }
        });

        /*上方工具栏监听*/
        table.on('toolbar(auth-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            switch(obj.event) {
                case 'addPost':
                    layerCallback= function(callbackData) {
                        var dataBak = [];
                        var tableBak = table.cache['auth-table'];
                        for (var i = 0; i < tableBak.length; i++) {
                            dataBak.push(tableBak[i]);
                        }
                        dataBak.push(callbackData);
                        table.reload("auth-table",{
                            data:dataBak
                        });
                    };
                    layer.open({
                        title: '添加用户',
                        content: 'static/html/layers/auth-insert.html',
                        type: 2,
                        offset: 'c',
                        area: ["500px", "350px"],
                        shade: 0.3
                    });
            }
        });
    });
</script>

</body>
</html>